<template>
    <div class="app-container">
        <van-nav-bar title="推送设置"/>
        
        <div class="setting-container">
            <div class="push-header">我的策略</div>
            <div class="setting-box">
                <div class="setting-item setting-header">
                    <div class="setting-left">策略类型</div>
                    <div class="setting-center">到期时间</div>
                    <div class="setting-right">推送设置</div>
                </div>
            </div>

            <div class="setting-box">
            
                <div class="setting-item setting-content">
                    <div class="setting-left">异动策略</div>
                    <div class="setting-center">
                        <span v-if="vip" class="">2023-04-01</span> 
                        <span>未订阅</span>
                    </div>
                    <div class="setting-right">
                        <!-- 打开开关 -->
                        <van-switch v-model="checked"  size="22px"/>
                        <!-- 去订阅按钮 -->
                    </div>
                </div>
                <div class="setting-item setting-content">
                    <div class="setting-left">高低点分型策略</div>
                    <div class="setting-center">
                        <span v-if="false">2023-04-01</span> 
                        <span>未订阅</span>
                    </div>
                    <div class="setting-right">
                        <!-- 去订阅按钮 -->
                        <van-button size="small" type="primary">去订阅</van-button>
                    </div>
                </div>
                <div class="setting-item setting-content">
                    <div class="setting-left">AG趋势策略</div>
                    <div class="setting-center">
                        <span class="">2023-04-01</span> 
                        <span>未订阅</span>
                    </div>
                    <div class="setting-right">
                        <!-- 打开开关 -->
                        <van-switch v-model="checked"  size="22px"/>
                        <!-- 去订阅按钮 -->
                    </div>
                </div>
                <div class="setting-item setting-content">
                    <div class="setting-left">波段跟踪策略</div>
                    <div class="setting-center">
                        <span class="">2023-04-01</span> 
                        <span>未订阅</span>
                    </div>
                    <div class="setting-right">
                        <!-- 打开开关 -->
                        <van-switch v-model="checked"  size="22px"/>
                        <!-- 去订阅按钮 -->
                    </div>
                </div>
                <div class="setting-item setting-content">
                    <div class="setting-left">中长线埋伏策略</div>
                    <div class="setting-center">
                        <span class="">2023-04-01</span> 
                        <span>未订阅</span>
                    </div>
                    <div class="setting-right">
                        <!-- 打开开关 -->
                        <van-switch v-model="checked"  size="22px"/>
                        <!-- 去订阅按钮 -->
                    </div>
                </div>
            </div>

            <div class="setting-footer">
                <p>注：关闭对应策略后，公众号将不在推送该策略，想要收到实时推送，请重新打开</p>
                <van-button block type="primary" size="small" @click="handleSave">保存设置</van-button>
            </div>
        </div>
    </div>
</template>

<script>
import { showToast, showSuccessToast } from 'vant'
import ClipboardJS from 'clipboard'
import { getPushStateList } from '@/api/user';
export default {
    name: 'Setting',
    props: {},
    data() {
        return {
            checked: false,
            activeNames: ['1']
        };
    },
    components: {
    },
    created() {
        this.setCopy()
    },
    computed: {},
    methods: {
        getPushStateList() {
            console.log('getPushStateList=====获取用户开通的策略start');
            getPushStateList().then(res => {
                console.log('getPushStateList=====获取用户开通的策略end', res);
                if (res.code === 20000) {
                    console.log(res)
                    this.pushStateList
                }
            })
        },
        setCopy() {
            let clipborad = new ClipboardJS('#copyUrl')
            //复制成功
            clipborad.on('success', function () {
                showSuccessToast('复制成功')
            })
            //复制失败
            clipborad.on('error', function () {
                showToast('复制失败')
            })
        },
        // 保存设置
        handleSave() {

        },
        handleShare() {
        }
    }
};
</script>
<style lang="less" scoped>
.app-container {
    background-color:  #f7f8fa;
}

.push-header {
    font-size: 20px;
    text-align: center;
    color: var(--main-color);
    text-align: center;
    margin: 20px 0;
    font-weight: 500;
}
.setting-container {
    height: calc(100vh - 106px);
    overflow-y: auto;
    overflow-x: hidden;
    overflow: overlay;
}
</style>